<template>
  <view>
     <uni-easyinput
          v-model="queryParams.loginAccount"
          placeholder="请输入登录账号"
        />
        <uni-easyinput
          v-model="queryParams.password"
          placeholder="请输入密码"
        />
        <uni-easyinput
          v-model="queryParams.areaId"
          placeholder="请输入区域ID"
        />
        <uni-easyinput
          v-model="queryParams.isAdmin"
          placeholder="请输入是否为管理员"
        />
        <!-- 使用uni-button组件来替代el-button -->
        <uni-button type="primary" @click="handleQuery" 
          >搜索</uni-button
        >
        <uni-button @click="resetQuery" 
          >重置</uni-button
        >
    <uni-row :gutter="10" class="mb8">
        <uni-col :span="1.5">
            <uni-button
                type="primary"
                plain
                icon="plus"
                @click="handleAdd"
                :permissions="['collect_user:collect_user:add']"
            >新增</uni-button>
        </uni-col>
<!--        <uni-col :span="1.5">
            <uni-button
                type="success"
                plain
                icon="edit"
                :disabled="single"
                @click="handleUpdate"
                :permissions="['collect_user:collect_user:edit']"
            >修改</uni-button>
        </uni-col>
        <uni-col :span="1.5">
            <uni-button
                type="danger"
                plain
                icon="delete"
                :disabled="multiple"
                @click="handleDelete"
                :permissions="['collect_user:collect_user:remove']"
            >删除</uni-button>
        </uni-col> -->
<!--        <uni-col :span="1.5">
            <uni-button
                type="warning"
                plain
                icon="download"
                @click="handleExport"
                :permissions="['collect_user:collect_user:export']"
            >导出</uni-button>
        </uni-col> -->
<!--        <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
        ></right-toolbar> -->
    </uni-row>
    <uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" @selection-change="selectionChange">
  <uni-tr>
  					<uni-th width="50" align="center">id</uni-th>
  					<uni-th width="50" align="center">用户</uni-th>
  					<uni-th width="100" align="center">密码</uni-th>
  					<uni-th width="80" align="center">是否管理员</uni-th>
            <uni-th width="204" align="center">操作</uni-th>
  </uni-tr>
  <!-- 	<uni-tr v-for="(item, index) in collect_userList.value" :key="index">
  					<uni-td>{{ item.id }}</uni-td>
  					<uni-td>
  						<view class="name">{{ item.loginAccount }}</view>
  					</uni-td>
  					<uni-td align="center">{{ item.password }}</uni-td>
            <uni-td align="center">{{ item.isAdmin }}</uni-td>
  					<uni-td>
  						<view class="uni-group" #default="scope">
  							<button class="uni-button" size="mini" type="primary" @click="handleUpdate(item)">修改</button>
  							<button class="uni-button" size="mini" type="warn" @click="handleDelete(item)">删除</button>
  						</view>
  					</uni-td>
  	</uni-tr> -->
  </uni-table>
  <view>
<!-- 	<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
					placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup> -->
			    <uni-popup ref="inputDialog" type="dialog">
			       <view class="popup-content-wrapper">
			        <uni-forms ref="collect_userRef" :modelValue="form" >
			          <uni-forms-item name="loginAccount" label="登录账号">
			            <uni-easyinput v-model="form.loginAccount" placeholder="请输入登录账号" />
			          </uni-forms-item>
			          <uni-forms-item name="password" label="密码">
			            <uni-easyinput v-model="form.password" placeholder="请输入密码" />
			          </uni-forms-item>
			          <uni-forms-item name="areaId" label="区域ID">
			            <uni-easyinput v-model="form.areaId" placeholder="请输入区域ID" />
			          </uni-forms-item>
			         <uni-forms-item name="isAdmin" label="是否为管理员">
                 <!-- <switch checked /> -->
			<uni-easyinput v-model="form.isAdmin" placeholder="是否为管理员" />
							</uni-forms-item>
			          
			        </uni-forms>
			        <view class="dialog-footer">
			          <uni-button type="primary" @click="submitForm">确 定</uni-button>
			          <uni-button @click="cancel">取 消</uni-button>
			        </view>
			     </view>
			    </uni-popup>
   </view>
   </view>
</template>

<script>
  import Vue from 'vue';
    import {ref} from 'vue';
  /* import uni from 'uni-app'; */
  import {
    listCollect_user,
    getCollect_user,
    delCollect_user,
    addCollect_user,
    updateCollect_user,
  } from "@/api/collect_user/collect_user";
    export default {
      data(){
        return{
          loading: false, 
		  open:false,
          form:{},
          collect_userList:[],
          queryParams: {
              pageNum: 1,
              pageSize: 10,
              loginAccount: null,
              password: null,
              areaId: null,
              isAdmin: null,
            },
                  columns: [
                    { label: '采集人员ID', prop: 'id', align: 'center' },
                    { label: '登录账号', prop: 'loginAccount', align: 'center' }
                  ]
        }
      },
      // mounted(){
      //   Vue.set(this, 'collect_userList', this.collect_userList);
      // },
    mounted() {
        // 给导航栏返回小箭头绑定点击事件
        // uni.$emit('navigateBack', this.handleBack);
    },
      methods:{
        resetQuery(){
          this.queryParams={
              pageNum: 1,
              pageSize: 10,
              loginAccount: null,
              password: null,
              areaId: null,
              isAdmin: null,
            },
          this.getList();
        },
        handleQuery(){
          this.getList();
        },
        cancel(){
          this.$refs.inputDialog.close()
        },
submitForm() {
            if (this.form.id!= null) {
                updateCollect_user(this.form).then((response) => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                     this.getList();
                });
            } else {
                addCollect_user(this.form).then((response) => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                });
            }
        
 	this.$refs.inputDialog.close()
},
		  handleAdd(){
			  this.$refs.inputDialog.open()
		  },
      handleUpdate(row) {
        // reset();
        const _id = row.id || ids.value;
        getCollect_user(_id).then((response) => {
          
          this.form= response.data;
          this.$refs.inputDialog.open()
          // open.value = true;
          // title.value = "修改采集人员表";
        });
      },
      handleDelete(row) {
        const _ids = row.id || ids.value;
delCollect_user(_ids);
 this.getList();
      },
         handleBack() {
           console.log(2)
                    // 这里可以添加你希望在点击返回小箭头时执行的操作，比如弹出提示框询问用户是否确认返回
                    uni.showModal({
                        title: '提示',
                        content: '确认要返回上一页面吗？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.navigateBack(); // 如果用户确认，执行返回上一页面的操作
                            }
                        }
                    });
                },
        xiu(){
           console.log(this.collect_userList.value[0])
        },
       async  getList() {
  		     this.loading = true;
  		  try {
  		            const response = await listCollect_user(this.queryParams);
  		            this.collect_userList.value = response.rows;
  		
  		            this.$nextTick(() => {
  		                this.loading = false;
  		                // 假设uni-table组件有refresh方法用于刷新数据展示
  		               // this.$refs.table.refresh();
  		            });
  		        } catch (error) {
  		            console.error("获取用户列表数据失败：", error);
  		            this.loading = false;
  		        }
        },
      },
  
      onLoad: function() {
        this.getList()
      }
    }
</script>

<style>
	.popup-content-wrapper {
	  border: 1px solid white;
	  border-radius: 5px;
	  padding: 10px;
	  background-color: white;
	}
	.dialog-footer {
	  display: flex;
	  justify-content: flex-end;
	  padding: 10px;
	
/* 	  uni-button {
	    margin-left: 10px;
	  } */
	}
</style>